<script setup>
import { ref } from 'vue';
import { ElAvatar, ElButton, ElTabs, ElTabPane, ElPopover, ElIcon } from 'element-plus';
import { More, ArrowLeft } from '@element-plus/icons-vue';
import axios from 'axios';

axios.defaults.baseURL = 'http://localhost:8040';
const activeTab = ref();
const avatarUrl = ref();
const selectedFile = ref(null);
// 工具函数：从Token解析用户ID（根据实际Token结构调整字段）
const getUserIdFromToken = (token) => {
  if (!token) return '';
  try {
    const payloadBase64 = token.split('.')[1];
    const decoded = JSON.parse(atob(payloadBase64));
    return decoded.sub; // 假设用户ID存放在JWT的sub字段
  } catch (error) {
    console.error('Token解析失败:', error);
    return '';
  }
};

// 获取用户ID
const token = localStorage.getItem('token');
if (!token) {
  console.log('未检测到登录态(无token)，请先登录');
}
const userId = getUserIdFromToken(token);//用户ID
if (!userId) {
  console.log("未获取到用户ID，请先登录");
} else {
  console.log("成功获取用户ID:" + userId);
}

// 用户信息
const userList = ref({
  id: '', //用户ID
  username: '',//用户名
  avatar: '',//头像
  password: '',
  phone: '',
  gender: '',
  birthday: '',
  wechatNumber: '',
  signature: '',
  region: ''
})
//根据userID查询用户信息
axios.get(`/user/selectAllById/${userId}`)
    .then(resp => {
      console.log(resp.data);
      userList.value = resp.data;  // 将返回的用户信息赋值给userList
      currentUser.value.avatar = resp.data.avatar;
      currentUser.value.name = resp.data.username;
    })
    .catch(err => {
      console.error('获取用户信息失败:', err);
    });
const currentUser = ref({
  id:userId,
  avatar: userList.value.avatar,//头像
  name: userList.value.username
});
</script>
<template>
  <div class="video-channel-profile">
    <router-link :to="{name:'videoperson'}">
    <div class="back-button">
      <el-icon  class="back-icon">
        <ArrowLeft />
      </el-icon>
    </div>
    </router-link>
    <!-- 顶部头像与个人信息 -->
    <div class="profile-header">
      <el-avatar
          class="profile-avatar"
          :src="currentUser.avatar"
          size="80"
      ></el-avatar>
      <div class="profile-info">
        <div class="username">{{ currentUser.name }}</div>
      </div>
    </div>

    <!-- 导航标签 -->
    <el-tabs v-model="activeTab" class="tab-nav">
      <el-tab-pane label="视频" name="videos"></el-tab-pane>
      <el-tab-pane label="音乐" name="music"></el-tab-pane>
      <el-tab-pane label="密友" name="friends"></el-tab-pane>
    </el-tabs>

    <!-- 右上角更多按钮 -->
    <div class="more-menu">
      <el-popover
          placement="top-end"
          width="160"
          trigger="click"
      >
        <template #reference>
          <el-icon class="more-icon"><More /></el-icon>
        </template>
        <div class="popover-menu">
          <div class="menu-item">举报</div>
          <div class="menu-item">反馈问题</div>
        </div>
      </el-popover>
    </div>
  </div>
</template>

<style scoped>
.video-channel-profile {
  /* 基础样式 - 移动优先 */
  width: 100%;
  max-width: 540px; /* 移动端最大宽度 */
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: #fff;
  border: 1px solid #f5f5f5;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

/* 返回按钮样式 */
.back-button {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 10;
}

.back-icon {
  cursor: pointer;
  font-size: 20px;
  color: #333;
}

/* 顶部头像与信息 */
.profile-header {
  display: flex;
  padding: 16px;
  padding-top: 40px;
  background-color: #fafafa;
}

.profile-avatar {
  margin-right: 12px;
}

.profile-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.username {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}

/* 标签导航 */
.tab-nav {
  border-bottom: 1px solid #f5f5f5;
}

.el-tabs__item {
  font-size: 14px;
  padding: 12px 0;
}

/* 右上角更多按钮 */
.more-menu {
  position: absolute;
  top: 16px;
  right: 16px;
}

.more-icon {
  cursor: pointer;
  font-size: 20px;
  color: #999;
}

/* Popover 菜单样式 */
.popover-menu {
  padding: 8px 0;
}

.menu-item {
  padding: 8px 16px;
  font-size: 12px;
  cursor: pointer;
}

.menu-item:hover {
  background-color: #f5f5f5;
}

/* 平板设备适配 (768px 及以上) */
@media (min-width: 768px) {
  .video-channel-profile {
    max-width: 720px;
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  }

  .username {
    font-size: 18px;
  }

  .back-icon, .more-icon {
    font-size: 22px;
  }

  .el-tabs__item {
    font-size: 16px;
    padding: 14px 0;
  }
}

/* 桌面设备适配 (1024px 及以上) */
@media (min-width: 1024px) {
  .video-channel-profile {
    max-width: 960px;
  }

  .profile-header {
    padding: 24px;
    padding-top: 32px;
  }

  .back-button, .more-menu {
    top: 24px;
  }

  .back-button {
    left: 24px;
  }

  .more-menu {
    right: 24px;
  }
}
</style>